/* 调整侧边栏宽度 */
.vp-sidebar {
  width: 20px; /* 可以根据需要调整这个值来改变侧边栏的宽度 */
  transition: width 0.3s ease; /* 添加过渡动画，让侧边栏宽度变化更平滑 */
}

/* 侧边栏展开时的样式 */
.vp-sidebar:not(.collapsed) {
  width: 20px;
}

/* 侧边栏折叠时的样式 */
.vp-sidebar.collapsed {
  width: 60px; /* 折叠时的宽度 */
}

/* 侧边栏标题样式 */
.vp-sidebar-group > .vp-sidebar-item {
  padding: 8px 16px; /* 调整标题的内边距，让标题更紧凑或宽松 */
  font-size: 16px; /* 调整标题字体大小 */
  color: #333; /* 标题文字颜色 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: background-color 0.3s ease; /* 背景颜色过渡动画 */
}

.vp-sidebar-group > .vp-sidebar-item:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}

/* 侧边栏子项样式 */
.vp-sidebar-item-children .vp-sidebar-item {
  padding: 6px 24px; /* 子项的内边距 */
  font-size: 14px; /* 子项字体大小 */
  color: #666; /* 子项文字颜色 */
  transition: background-color 0.3s ease; /* 背景颜色过渡动画 */
}

.vp-sidebar-item-children .vp-sidebar-item:hover {
  background-color: #f9f9f9; /* 子项鼠标悬停时的背景颜色 */
}

/* 侧边栏活动项样式 */
.vp-sidebar-item.active {
  font-weight: bold; /* 活动项文字加粗 */
  color: #8fbc8f; /* 活动项文字颜色，与主题色一致 */
  background-color: #e8f6e8; /* 活动项背景颜色 */
}
/* 控制侧边栏展开时的宽度 */
:root {
  --vp-sidebar-width: 220px;
}

/* 控制侧边栏折叠时的宽度 */
.vp-sidebar.collapsed {
  width: 60px;
  transition: width 0.3s ease; /* 添加过渡动画 */
}

/* 侧边栏组标题样式 */
.vp-sidebar-group > .vp-sidebar-item {
  padding: 8px 16px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.vp-sidebar-group > .vp-sidebar-item:hover {
  background-color: #f0f0f0;
}

/* 侧边栏子项样式 */
.vp-sidebar-item-children .vp-sidebar-item {
  padding: 6px 24px;
  font-size: 14px;
  color: #666;
  transition: background-color 0.3s ease;
}

.vp-sidebar-item-children .vp-sidebar-item:hover {
  background-color: #f9f9f9;
}

/* 侧边栏活动项样式 */
.vp-sidebar-item.active {
  font-weight: bold;
  color: #8fbc8f;
  background-color: #e8f6e8;
}
.VPSidebar {
  width: 200px;
}
